<template>
  <div class="main">
    <el-row :gutter="14">
      <el-col :span="colSpan">
        <div class="statistic-card">
          <el-statistic :value="sum_statistics.paper">
            <template #title>
              <div class="title">
                文献
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="colSpan">
        <div class="statistic-card">
          <el-statistic :value="sum_statistics.scholar">
            <template #title>
              <div class="title">
                学者
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="colSpan">
        <div class="statistic-card">
          <el-statistic :value="sum_statistics.venue">
            <template #title>
              <div class="title">
                期刊
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="colSpan">
        <div class="statistic-card">
          <el-statistic :value="sum_statistics.org">
            <template #title>
              <div class="title">
                组织
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="colSpan">
        <div class="statistic-card">
          <el-statistic :value="sum_statistics.concept">
            <template #title>
              <div class="title">
                领域
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PlatformStatistic",
  props: {
    sum_statistics: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
        colSpan: 4.5,
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.title{
  display: grid;
  place-items: center;
  font-size: large;
  color: var(--main-color);
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}
.el-row {
  transform: scale(1.6);
}
.statistic-card {
  height: 60px;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
  margin-top: 100px;
  margin-bottom: 100px
}

.main {
  display: grid;
  place-items: center;
}
</style>